<template>
  <div class="regBox">
    <div class="regBox-header">
      <div class="header-left">
        <router-link to="/"
          ><img src="../assets/img/4.png" alt=""
        /></router-link>
        <span>欢迎登录</span>
      </div>
      <router-link to="/LogUserIdea">登录页面，调查问卷</router-link>
    </div>

    <div class="regBox-body">
      <div class="body-white">
        <div class="body-header">
          <span @click="loginMode = 1">手机登录</span>
          <span @click="loginMode = 2">二维码登录</span>
        </div>
        <div class="bodyCenter">
          <img :src="qrimgSrc" v-if="loginMode == 2" />
          <div class="body-litBody" v-if="loginMode == 1">
            <div class="body-input">
              <div class="divPhone">
                <input
                  type="text"
                  v-model="phone"
                  @blur="getPhone()"
                  class="phone"
                  placeholder="请输入手机号码"
                />
                <p
                  id="idPhone"
                  :class="elPhone == true ? 'warningone' : 'successone'"
                  v-if="flagone"
                >
                  {{ phoneContent }}
                </p>
              </div>
              <div class="divPwd">
                <input
                  type="password"
                  v-model="pwd"
                  class="pwd"
                  placeholder="请输入密码"
                />
              </div>
            </div>
            <div class="body-tip">
              <button>短信登录</button>
              <!-- <button>密码登录</button> -->
              &nbsp;&nbsp;&nbsp;
              <input type="radio" />自动登录
            </div>
            <div class="body-regButton">
              <button @click="getLogin()">登录</button>
              <p></p>
            </div>
          </div>
          <hr />
          <div class="body-footer">
            <a href="#" class="else"></a>
            <router-link to="/register" class="toLogin"
              >还没账号？快免费注册</router-link
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  computed: {},
  data() {
    return {
      loginMode: 2,
      phone: "",
      elPhone: "",
      flagone: "",
      pwd: "",
      phoneContent: "",
      logNickName: "",
      logHeadImg: "",
      qrimgSrc: "",
      timer: null,
    };
  },
  methods: {
    ...mapMutations(["updateUserInfo", "goToPage"]),
    getPhone() {
      var url = "cellphone/existence/check?phone=" + this.phone;
      this.axios.get(url).then(res => {
        console.log("log:", res);
        if (res.data.exist == "-1") {
          this.flagone = true;
          this.phoneContent = "该手机号码未被注册,请先去注册";
          this.elPhone = true;
          return;
        }
      });
    },
    getLogin() {
      var isDebugMode = false;
      var url = `login/cellphone?phone=${this.phone}&password=${this.pwd}`;
      if (isDebugMode) {
        url = "http://localhost/userInfo.json";
      }

      this.axios.get(url).then(res => {
        console.log("login:", res);
        if (res.status != 200) {
          alert("手机号或者密码错误");
          return;
        }

        if (isDebugMode) {
          console.log(res);
          console.log(typeof res);
        }
        var obj = res.data;
        var user = {
          account: obj.account,
          // token: obj.token,
          profile: obj.profile,
        };
        this.updateUserInfo(user);
        console.log("this.userInfo:", this.userInfo);
        this.$router.push(this.goToPage);
      });
    },
    checkLoginStatus() {
      var cookie = localStorage.getItem("cookie");
      this.axios
        .get(`/login/status?timerstamp=${Date.now()}&cookie=${cookie}`)
        .then(res => {
          console.log(JSON.stringify(res.data, null, 2));
          if (res.data.data.account == null || res.data.data.profile == null) {
            this.qrLogin();
            return;
          }
          var user = {
            account: res.data.data.account,
            // token: obj.token,
            profile: res.data.data.profile,
          };
          this.updateUserInfo(user);
          console.log(this.goToPage);
          this.$router.push("/");
        });
    },
    qrLoginInterval(key) {
      var vue = this;
      this.timer = setInterval(function () {
        console.log("qrLoginInterval");
        vue.axios
          .get(`/login/qr/check?key=${key}&timerstamp=${Date.now()}`)
          .then(res => {
            var status = res.data.code;
            if (status === 800) {
              // alert('二维码已过期,请重新获取')
              clearInterval(this.timer);
              vue.qrLogin();
            } else if (status == 803) {
              clearInterval(this.timer);
              alert("授权登录成功");
              // await this.getLoginStatus(statusRes.cookie)
              console.log(JSON.stringify(res));
              localStorage.setItem("cookie", res.data.cookie);
              vue.checkLoginStatus();
            }
          });
      }, 500);
    },
    qrLogin() {
      this.axios.get(`/login/qr/key?timerstamp=${Date.now()}`).then(res => {
        var key = res.data.data.unikey;
        console.log("tjb unikey: " + key);
        this.axios
          .get(
            `/login/qr/create?key=${key}&qrimg=true&timerstamp=${Date.now()}`
          )
          .then(res2 => {
            this.qrimgSrc = res2.data.data.qrimg;
            this.qrLoginInterval(key);
          });
      });
    },
  },
  mounted() {
    this.checkLoginStatus();
    // this.qrLogin();
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
#idPhone {
  margin-top: 0;
}
.warningone {
  margin: 20px 0 20px 0;
  font-size: 12px;
  color: rgb(236, 10, 10);
}
.successone {
  margin: 20px 0 20px 0;
  color: rgb(62, 237, 62);
  font-size: 12px;
}
</style>

<style scoped src="../assets/css/login.css"></style>
